<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false">
      </el-alert>
      <el-row>
        <el-col>
          <span>选择商品分类：</span>
          <el-cascader v-model="selectedKeys" :options="cateList" :props="cascaderProps" @change="handleChange"
            clearable>
          </el-cascader>
        </el-col>
      </el-row>
      <!-- tabs -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button size="mini" type="primary" :disabled="btnDisabled">添加参数</el-button>
          <el-table :data="paramsData" border stripe>
            <el-table-column label="明细" type="expand">
              <template slot-scope="scope">
                <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="handleClose(scope.row,i)">
                  {{ item }}</el-tag>
                <!-- 输入框 -->
                <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)">
                </el-input>
                <!-- 按钮 -->
                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
              </template>
            </el-table-column>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="参数明细" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template>
                <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button size="mini" type="primary" :disabled="btnDisabled">添加属性</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
	data() {
		return {
			cateList: [],
			cascaderProps: {
				expandTrigger: 'hover',
				label: 'cat_name',
				value: 'cat_id',
			},
			selectedKeys: [],
			activeName: 'many',
            paramsData: [],
		}
	},
	created() {
		this.getCateList()
	},
	methods: {
		async getCateList() {
			// 获取分类列表数据
			const { data: res } = await this.$http.get('categories')
			if (res.meta.status !== 200) {
				return this.$message.error('获取商品分类失败！')
			}
			this.cateList = res.data
		},
		handleChange() {
			this.getParamsData()
		},
		handleClick() {
			this.getParamsData()
		},
		async getParamsData() {
			const { data: res } = await this.$http.get(
				`categories/${this.cateId}/attributes`,
				{
					params: {
						sel: this.activeName,
					},
				}
			)
			this.paramsData = res.data

			// 对参数的明细进行处理：按空格进行拆分
			this.paramsData.forEach((item) => {
                item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
                // 为每个参数对象，额外添加两个属性
                this.$set(item,'inputVisible',false)
                this.$set(item,'inputValue','')
			})

			console.log(this.paramsData)
		},
		// 关闭tag
		handleClose(row, i) {
			row.attr_vals.splice(i, 1)
			this.updateParams(row)
        },
        async updateParams(row){
            const { data: res } = await this.$http.put(
				`categories/${this.cateId}/attributes/${row.attr_id}`,
				{
					attr_name: row.attr_name,
					attr_sel: row.attr_sel,
					attr_vals: row.attr_vals.join(' '),
				}
			)
			if (res.meta.status !== 200) {
				return this.$message.error('更新参数失败')
			}
			this.$message.success('更新参数成功')
        },
        handleInputConfirm(row){
            row.attr_vals.push(row.inputValue)
            this.updateParams(row)
        },
        showInput(row){
            console.log(row)
            row.inputVisible = true
        }
	},
	computed: {
		btnDisabled() {
			return this.selectedKeys.length == 3 ? false : true
		},
		cateId() {
			return this.selectedKeys.length == 3 ? this.selectedKeys[2] : null
		},
	},
}
</script>

<style lang="less" scoped>
.el-alert {
	margin-bottom: 15px;
}
.el-tag {
	margin: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>